<template>
  <div class="wrap">
    <p class="p1">订单管理</p>
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.region" @change="change">
            <el-option label="按商品id查询" value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="关键词"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="150">
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人"></el-table-column>
        <el-table-column prop="statusDesc" label="订单状态"> </el-table-column>
        <el-table-column prop="payment" label="订单总价"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <page
        :pageSize="pageSize"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
      ></page>
    </div>
  </div>
</template>

<script>
import { getorder, getOrderSearch } from "@/utils/request.js";
import page from "@/components/page.vue";
export default {
  name: "Order",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      formInline: {
        user: "",
        region: "按订单id查询",
      },
      e: "",
      tableData: [],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      getorder(this.pageNum).then((res) => {
        // console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    }, // 查询
    onSubmit() {
      if (this.formInline.user != "") {
        getOrderSearch({ orderNo: this.formInline.user }).then((res) => {
          // console.log(res);
          this.tableData = res.data.list;
          this.total = res.data.total;
        });
      }else if(this.formInline.user == ""){
        this.getlist();
      }
    },
    // 下拉菜单点击事件
    change(e) {
      // this.e = e;
      // console.log(this.e);
    },
    // 查看当前行数据 商品详情页
    handleClick(row) {
      // console.log(row);
      this.$router.push({path:'/orderdetail',query:{orderNo:row.orderNo}})
    },
    // 点击页码切换页
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getlist();
    },
  },
  components: {
    page,
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .head {
    text-align: left;
  }
  .foot {
    text-align: left;
    padding: 20px 0 50px 0;
  }
}
</style>
